$(function () {
    // alert(1);
    loadData(); //让用户打开时还能看到上次渲染完的样子

    //1.按下回车键 把数据存储到本地存储里
    $("#title").on("keydown", function (event) { //需要事件对象event
        if (event.keyCode === 13) {
            if ($(this).val() == '') {
                alert("请输入内容");
            } else {
                //先读取本地存储原来的数据 （会经常调用）所以在全局封装一个gatData()函数方便调用
                //存储格式 var todolist = [{ title: "xxx", done: false }];
                var local = getData();//先拿到本地存储数据 
                // console.log(local); //拿到了[],

                //2.按回车把最新的数据保存到原数组中
                local.push({ title: $(this).val(), done: false });
                //把新数组 储存给本地存储  （回车，删除，和复选框按钮都会更新本地存储， 所以也在全局定义saveData()函数更好）
                saveData(local);
                // console.log(local);

                //3.按回车把数据渲染到页面中 同理 常用 封装函数loadData();
                loadData();
                $(this).val("");//渲染完 input里清空
                //有个bug 每次加载就会把之前的数据都渲染一遍， 会出现重复事项  所以加载前要先把ol里的内容清空
            }
        }
    })

    //4.删除按钮效果   点击当前小a， 删除的不是a所在的li 而是本地存储里对应的数据 
    $("ol, ul").on("click", "a", function () { //直接给a绑定on事件的话 执行一次后就不行了 除非刷新 所以不能给a直接绑定！
        // alert(1);
        // (1) 获取数据
        var data = getData();
        // (2)删除对应数据并保存给本地存储  怎么知道对应的数据是哪一个 就要用到索引 
        // 但a不在同一个父亲li里，所以他们的索引都是0， 所以只能自定义索引号  可在创建时就给它定义 给a一个属性index = i即可
        // alert($(this).attr("index")) 获取到了索引号
        var index = $(this).attr("index");

        // var index = $("a").attr("index"); 这样获取来的index永远是最新的那个a的  
        // console.log(index); 
        data.splice(index, 1); //data是数组 用该方法删除当前索引的数据

        //(3) 存储新的数据
        saveData(data);

        //(4) 渲染新的数据
        loadData();
    })

    //5.复选框修改效果
    $("ol,ul").on("click", "input", function () { //问题同上 不能直接给li input(动态创建的)绑定，否则效果出错
        // alert(1)
        // 获取数据
        var data = getData();

        // 修改并存储数据 
        // console.log($(this).prop("checked")); 获取到复选框状态 其状态英语数据中done的值相对应 怎么确定对应的数据是那个呢， 可以利用a的索引 即当前按钮的兄弟a的索引确定当前数据
        var index = $(this).siblings("a").attr("index"); //同理 不能不写 $(this).siblings()
        data[index].done = $(this).prop("checked");
        saveData(data);

        // 重新渲染
        loadData(); //但同时要在该函数里判断 done为true 则渲染到ul里 反之渲染到ol里
    })



    //封装 读取本地存储数据 的函数
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            //记得转化为对象格式 因为本地存储数据是字符串型
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    //封装 更新本地存储数据 的函数
    function saveData(data) { //local是局部变量，所以只能以实参的形式传进来
        localStorage.setItem("todolist", JSON.stringify(data));//把local转换成字符串类型存储
    }

    //封装 渲染加载本地存储数据 的函数
    function loadData() {
        //读取本地数据 有数据才能加载
        var data = getData();

        //解决bug  遍历前先清空ol  ul里的元素内容
        $("ol, ul").empty(); //用remove的话 就把ol给删了 ！！！所以不行哦

        //6.待完成和已完成数效果
        var todo = 0;
        var done = 0;
        //在遍历的时候进行改变 

        //遍历数据 同时创建小li 添加到ol里
        $.each(data, function (i, ele) {
            // console.log(ele);

            if (ele.done == false) {
                $("ol").prepend("<li> <input type='checkbox' name=''> <p> " + ele.title + " </p > <a href='javascript:;' index = " + i + "></a> </li > ");;//给a自定义属性index
                // $("p").text($("#title").val()) 这样写最新输出的内容会覆盖之前的，所以不行  要在p标签里改

                todo++;//done为false 创建一个li todo自增一
            } else {
                $("ul").prepend("<li> <input type='checkbox' checked='checked' name=''> <p> " + ele.title + " </p > <a href='javascript:;' index = " + i + "></a> </li > ")//添加 checked='checked'，保证复选框是选中的
                //同上一个bug ul也要在遍历前清空元素

                done++;//done为true 创建一个li done自增一
            }
            //不用担心删除要不要减一的问题，因为不论是删除还是复选框操作，都获取并返回了新的数据，所以渲染时遍历的数据都是重新进行的，todo和done就只用自增
        })
        //遍历完了 在进行text()赋值
        $("#todocount").text(todo);
        $("#donecount").text(done);
    }

})
